<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <turnipk></turnipk>
        <turnips></turnips>
    </div>

    <script type="text/javascript">
        //全局组件数据传递
        let turnip = new Vue();
        Vue.component("turnipk", {
            template: "<button @click='tur'>点击{{msg}}</button>",
            data() {
                return {
                    msg: "组件1的数据"
                }
            },
            methods: {
                tur() {
                    turnip.$emit("event_nip", this.msg) //触发事件
                }
            }
        })
        Vue.component("turnips", {
            template: "<p>{{msg2}}</p>",
            data() {
                return {
                    msg2: "组件2内的数据"
                }
            },
            mounted() {
                let _this = this;
                //监听事件
                turnip.$on("event_nip", (val) => { //箭头函数指向上一级对象
                    console.log(val)
                    this.msg2 = val
                })
            }
        })

        let app = new Vue({
            el: "#app",
        })
    </script>
</body>

</html>